<template>
  <div class="features-page">
    <div class="page-header">
      <h1 class="page-title">功能展示</h1>
      <p class="page-subtitle">体验Vue3微前端子应用的各种功能特性</p>
    </div>

    <div class="features-grid">
      <!-- 表单功能 -->
      <a-card title="表单组件" class="feature-card">
        <template #extra>
          <form-outlined />
        </template>
        <a-form
          :model="formData"
          layout="vertical"
          @finish="handleFormSubmit"
        >
          <a-form-item label="姓名" name="name">
            <a-input v-model:value="formData.name" placeholder="请输入姓名" />
          </a-form-item>
          <a-form-item label="邮箱" name="email">
            <a-input v-model:value="formData.email" placeholder="请输入邮箱" />
          </a-form-item>
          <a-form-item label="技能" name="skills">
            <a-select
              v-model:value="formData.skills"
              mode="multiple"
              placeholder="选择技能"
              :options="skillOptions"
            />
          </a-form-item>
          <a-form-item label="介绍" name="description">
            <a-textarea 
              v-model:value="formData.description" 
              :rows="3"
              placeholder="简单介绍一下自己"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" :loading="formLoading">
              提交
            </a-button>
            <a-button style="margin-left: 8px" @click="resetForm">
              重置
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>

      <!-- 数据表格 -->
      <a-card title="数据表格" class="feature-card">
        <template #extra>
          <table-outlined />
        </template>
        <a-table
          :columns="tableColumns"
          :data-source="tableData"
          :pagination="{ pageSize: 5 }"
          size="small"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ record.status }}
              </a-tag>
            </template>
            <template v-if="column.key === 'action'">
              <a-button 
                type="link" 
                size="small"
                @click="handleEdit(record)"
              >
                编辑
              </a-button>
              <a-divider type="vertical" />
              <a-button 
                type="link" 
                danger 
                size="small"
                @click="handleDelete(record)"
              >
                删除
              </a-button>
            </template>
          </template>
        </a-table>
      </a-card>

      <!-- 图表展示 -->
      <a-card title="数据可视化" class="feature-card">
        <template #extra>
          <bar-chart-outlined />
        </template>
        <div class="chart-container">
          <canvas ref="chartCanvas" width="400" height="200"></canvas>
        </div>
        <div class="chart-controls">
          <a-button-group>
            <a-button 
              v-for="chartType in chartTypes" 
              :key="chartType.type"
              :type="currentChartType === chartType.type ? 'primary' : 'default'"
              @click="changeChartType(chartType.type)"
            >
              {{ chartType.name }}
            </a-button>
          </a-button-group>
        </div>
      </a-card>

      <!-- 交互组件 -->
      <a-card title="交互组件" class="feature-card">
        <template #extra>
          <interaction-outlined />
        </template>
        <div class="interaction-demos">
          <!-- 步骤条 -->
          <div class="demo-section">
            <h4>步骤条</h4>
            <a-steps v-model:current="currentStep" size="small">
              <a-step title="开始" description="开始使用" />
              <a-step title="配置" description="配置参数" />
              <a-step title="完成" description="使用完成" />
            </a-steps>
            <div class="step-actions">
              <a-button 
                v-if="currentStep > 0"
                @click="currentStep--"
              >
                上一步
              </a-button>
              <a-button 
                v-if="currentStep < 2"
                type="primary"
                @click="currentStep++"
              >
                下一步
              </a-button>
            </div>
          </div>

          <!-- 评分组件 -->
          <div class="demo-section">
            <h4>评分组件</h4>
            <a-rate v-model:value="rating" allow-half />
            <span class="rating-text">{{ getRatingText(rating) }}</span>
          </div>

          <!-- 进度条 -->
          <div class="demo-section">
            <h4>进度条</h4>
            <a-progress :percent="progress" />
            <div class="progress-controls">
              <a-button @click="changeProgress(-10)">-10%</a-button>
              <a-button @click="changeProgress(10)">+10%</a-button>
            </div>
          </div>

          <!-- 时间选择器 -->
          <div class="demo-section">
            <h4>时间选择</h4>
            <a-date-picker v-model:value="selectedDate" />
            <a-time-picker v-model:value="selectedTime" style="margin-left: 8px" />
          </div>
        </div>
      </a-card>
    </div>

    <!-- 状态管理演示 -->
    <a-card title="状态管理" class="state-demo-card">
      <template #extra>
        <database-outlined />
      </template>
      <div class="state-demo">
        <div class="state-section">
          <h4>计数器 (Pinia)</h4>
          <div class="counter-display">
            <span class="counter-value">{{ count }}</span>
            <div class="counter-controls">
              <a-button @click="increment">+1</a-button>
              <a-button @click="decrement">-1</a-button>
              <a-button @click="reset">重置</a-button>
            </div>
          </div>
        </div>

        <div class="state-section">
          <h4>Todo列表</h4>
          <div class="todo-section">
            <a-input-search
              v-model:value="newTodo"
              placeholder="添加新任务"
              enter-button="添加"
              @search="addTodo"
            />
            <a-list
              :data-source="todos"
              size="small"
              class="todo-list"
            >
              <template #renderItem="{ item }">
                <a-list-item>
                  <template #actions>
                    <a-button 
                      type="link" 
                      size="small"
                      @click="toggleTodo(item.id)"
                    >
                      {{ item.completed ? '取消' : '完成' }}
                    </a-button>
                    <a-button 
                      type="link" 
                      danger 
                      size="small"
                      @click="removeTodo(item.id)"
                    >
                      删除
                    </a-button>
                  </template>
                  <span :class="{ 'completed-todo': item.completed }">
                    {{ item.text }}
                  </span>
                </a-list-item>
              </template>
            </a-list>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {
  FormOutlined,
  TableOutlined,
  BarChartOutlined,
  InteractionOutlined,
  DatabaseOutlined
} from '@ant-design/icons-vue'

// 表单数据
const formData = reactive({
  name: '',
  email: '',
  skills: [],
  description: ''
})

const formLoading = ref(false)

const skillOptions = [
  { label: 'Vue.js', value: 'vue' },
  { label: 'React', value: 'react' },
  { label: 'Angular', value: 'angular' },
  { label: 'TypeScript', value: 'typescript' },
  { label: 'Node.js', value: 'nodejs' },
  { label: 'Python', value: 'python' }
]

// 表格数据
const tableColumns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '职位', dataIndex: 'position', key: 'position' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '操作', key: 'action' }
]

const tableData = ref([
  { key: '1', name: '张三', age: 28, position: '前端工程师', status: '在职' },
  { key: '2', name: '李四', age: 32, position: '后端工程师', status: '在职' },
  { key: '3', name: '王五', age: 29, position: '产品经理', status: '离职' },
  { key: '4', name: '赵六', age: 26, position: 'UI设计师', status: '在职' },
  { key: '5', name: '陈七', age: 31, position: '测试工程师', status: '在职' }
])

// 图表相关
const chartCanvas = ref(null)
const currentChartType = ref('bar')
const chartTypes = [
  { type: 'bar', name: '柱状图' },
  { type: 'line', name: '折线图' },
  { type: 'pie', name: '饼图' }
]

// 交互组件
const currentStep = ref(0)
const rating = ref(4.5)
const progress = ref(60)
const selectedDate = ref(null)
const selectedTime = ref(null)

// 状态管理
const count = ref(0)
const newTodo = ref('')
const todos = ref([
  { id: 1, text: '学习Vue3', completed: true },
  { id: 2, text: '实现微前端', completed: false },
  { id: 3, text: '优化性能', completed: false }
])

// 方法
const handleFormSubmit = () => {
  formLoading.value = true
  setTimeout(() => {
    formLoading.value = false
    console.log('表单提交:', formData)
    alert('表单提交成功！')
  }, 1000)
}

const resetForm = () => {
  Object.assign(formData, {
    name: '',
    email: '',
    skills: [],
    description: ''
  })
}

const getStatusColor = (status) => {
  return status === '在职' ? 'green' : 'red'
}

const handleEdit = (record) => {
  console.log('编辑:', record)
  alert(`编辑 ${record.name}`)
}

const handleDelete = (record) => {
  console.log('删除:', record)
  const index = tableData.value.findIndex(item => item.key === record.key)
  if (index > -1) {
    tableData.value.splice(index, 1)
  }
}

const changeChartType = (type) => {
  currentChartType.value = type
  drawChart()
}

const drawChart = () => {
  const canvas = chartCanvas.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  // 简单的图表绘制示例
  if (currentChartType.value === 'bar') {
    drawBarChart(ctx)
  } else if (currentChartType.value === 'line') {
    drawLineChart(ctx)
  } else {
    drawPieChart(ctx)
  }
}

const drawBarChart = (ctx) => {
  const data = [30, 50, 80, 40, 70]
  const barWidth = 60
  const maxHeight = 150
  
  data.forEach((value, index) => {
    const height = (value / 100) * maxHeight
    const x = index * (barWidth + 20) + 50
    const y = 180 - height
    
    ctx.fillStyle = '#1890ff'
    ctx.fillRect(x, y, barWidth, height)
    
    ctx.fillStyle = '#000'
    ctx.fillText(value, x + 20, y - 5)
  })
}

const drawLineChart = (ctx) => {
  const data = [30, 50, 80, 40, 70]
  const pointGap = 80
  
  ctx.strokeStyle = '#1890ff'
  ctx.lineWidth = 2
  ctx.beginPath()
  
  data.forEach((value, index) => {
    const x = index * pointGap + 50
    const y = 180 - (value / 100) * 150
    
    if (index === 0) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
    
    // 绘制点
    ctx.fillStyle = '#1890ff'
    ctx.beginPath()
    ctx.arc(x, y, 4, 0, Math.PI * 2)
    ctx.fill()
  })
  
  ctx.stroke()
}

const drawPieChart = (ctx) => {
  const data = [30, 25, 20, 25]
  const colors = ['#1890ff', '#52c41a', '#faad14', '#f5222d']
  const centerX = 200
  const centerY = 100
  const radius = 80
  
  let currentAngle = 0
  
  data.forEach((value, index) => {
    const sliceAngle = (value / 100) * Math.PI * 2
    
    ctx.fillStyle = colors[index]
    ctx.beginPath()
    ctx.moveTo(centerX, centerY)
    ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle)
    ctx.fill()
    
    currentAngle += sliceAngle
  })
}

const getRatingText = (value) => {
  const texts = ['很差', '较差', '一般', '较好', '很好']
  return texts[Math.floor(value) - 1] || '未评分'
}

const changeProgress = (delta) => {
  progress.value = Math.max(0, Math.min(100, progress.value + delta))
}

// 状态管理方法
const increment = () => count.value++
const decrement = () => count.value--
const reset = () => count.value = 0

const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      completed: false
    })
    newTodo.value = ''
  }
}

const toggleTodo = (id) => {
  const todo = todos.value.find(t => t.id === id)
  if (todo) {
    todo.completed = !todo.completed
  }
}

const removeTodo = (id) => {
  const index = todos.value.findIndex(t => t.id === id)
  if (index > -1) {
    todos.value.splice(index, 1)
  }
}

onMounted(() => {
  drawChart()
})
</script>

<style scoped>
.features-page {
  padding: 24px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 36px;
  color: #2c3e50;
  margin-bottom: 12px;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.feature-card {
  height: 100%;
}

.chart-container {
  margin-bottom: 16px;
  text-align: center;
}

.chart-controls {
  text-align: center;
}

.interaction-demos {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.demo-section h4 {
  margin-bottom: 12px;
  color: #2c3e50;
}

.step-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.rating-text {
  margin-left: 8px;
  color: #666;
}

.progress-controls {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.state-demo-card {
  margin-top: 24px;
}

.state-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.state-section h4 {
  margin-bottom: 16px;
  color: #2c3e50;
}

.counter-display {
  text-align: center;
}

.counter-value {
  font-size: 48px;
  font-weight: bold;
  color: #1890ff;
  display: block;
  margin-bottom: 16px;
}

.counter-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.todo-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.todo-list {
  max-height: 200px;
  overflow-y: auto;
}

.completed-todo {
  text-decoration: line-through;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .state-demo {
    grid-template-columns: 1fr;
  }
  
  .page-title {
    font-size: 28px;
  }
}
</style>
